<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>哪些数组的方法是响应式的</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    methods: {
      btnClick() {
        // 1.push()方法：在数组最后面添加元素
        // this.letters.push("aaa");
        // this.letters.push("aaa","bbb","ccc");

        // 2.pop():删除数组中的最后一个元素
        // this.letters.pop();

        // 3.shift():删除数组中的第一个元素
        // this.letters.shift();

        // 4.unshift():在数组最前面添加元素
        // this.letters.unshift("qqq");
        // this.letters.unshift('123','456','789','10');

        // 5.splice():删除元素/插入元素/替换元素
        // 第一个参数是：数组要被操作的位置索引下标
        // (1)删除元素：第二个参数--传入你要删除的几个元素（如果没有传，就删除后边的所有元素）
        // this.letters.splice(2); // 从下标2开始，删除后边的所有元素包括下标2，结果：A B
        // this.letters.splice(2,3); // 从下标2开始，向后删除一共3个元素，结果：A B F
        // (2)替换元素：第二个参数--表示我们要替换几个元素，后边是用于替换前面的元素
        // this.letters.splice(2,3,'123','456','789'); // 结果：A B 123 456 789 F
        // this.letters.splice(2,3,'123','456','789','10'); // 如果后边多写元素了，那么结果：A B 123 456 789 10 F
        // (3)插入元素：第二个参数--传入0，并且后边跟上要插入的元素,要插入的元素会被插入到第一个参数指定的下标位置
        // this.letters.splice(2,0,'555'); // 结果：A B 555 C D E F

        // 6.sort():将数组正序排序
        // this.letters.unshift("YYY");//在数组最前面添加元素YYY，结果：YYY A B C D E F
        // this.letters.sort();// 然后正序排序，结果：A B C D E F YYY

        // 7.reverse():将数组进行反转排序
        // this.letters.reverse();

        // 注意：vue中，不能直接用下标修改数组中的元素，如：this.letters[2] = '123'，这样页面不会被响应式渲染
        // 可以用splice()进行修改元素,如：
        // this.letters.splice(2,1,'123');
        // Vue本身也有一个方法可以修改数组中的元素
        // 语法：Vue.set(要修改的对象，索引值，修改后的值);
        Vue.set(this.letters,2,'123');
      },

    }
  });
</script>
</body>
</html>
